<template name="box">
	<view>
		<view class="block" :show='show' @longpress="caidan()" @click="">
			<!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" fields="day" @change="bindDateChange">
			    <view class="uni-input">
					<view class="riqi">{{date}}</view>
				</view>
			</picker> -->
			<view class="uni-input riqi " :class="[sta === 2 ? 'finishclass' : (sta === 1 ? 'ongoingclass' : '')]"  @click.stop="showMoreBtn">{{$utils.secondsToDate(data.itemDate)}}</view>
			
			<view class="beizhu" >{{data.itemName}}</view>
			
		<!-- 	<u-popup v-model="showAdd">
			
			</u-popup> -->
			
			
		</view>
		<!-- 点击出现的按钮 -->
<!-- 		<view class="more_btn" v-show='isShowBtn()'>
			<button class="btn_item"  @click="editBtn">编辑</button>
			<button class="btn_item"  @click="deleteBtn">删除</button>
			<button class="btn_item"  @click="finishBtn">已达成</button>
			<button class="btn_item"  @click="cancelShowBtns">取消</button>
			
		</view> -->
	</view>
	
</template>

<script>
	export default {
		name:'box',
		props:["data", "activeBox", "boxId", "sta"],
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				show:false,
				date: currentDate,
				showBtns: false,
				showAdd: false,
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			
			isShowBtn() {
				return this.boxId == this.activeBox
			},
			
			caidan(){
				this.show=true;
				
			},
			bindDateChange: function(e) {
					console.log('picker发送选择改变，携带值为', e.target.value)
					this.date = e.target.value
				},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			showMoreBtn() {
				this.$emit('clickBtn', this.data)
			},
			cancelShowBtns () {
				this.$emit('cancelBtn')
			},
			editBtn () {
				this.$emit('editBtn')
				console.log("点击了编辑按钮~")
			},
			addBtn () {
				this.showAdd = true
				this.$emit('clickAdd')
			},
			deleteBtn () {
				console.log("点击了删除按钮~")
			},
			finishBtn () {
				console.log("点击了达成按钮~")
			}
					    
		}
	}
	
</script>

<style>
.block{
	font-size: small ;
}
.uni-input{
	border: 1rpx solid #666FFC;
	height: 50rpx;
	width: 100rpx;
	border-radius: 12rpx;
	line-height: 50rpx;
}
.riqi{
	font-size: smaller;
	text-align: center;
	margin-top: 8rpx;
}
.finishclass {
	background-color: #666FFC;
	color: #fff;
}
.ongoingclass {
	background-color: #F228D1;
	color: #fff;
}
.beizhu{
	width: 100rpx;
	text-align: center;
}

.more_btn {
	position: absolute;
	transform: translate(100rpx, -200rpx);
	z-index: 1000;
	border: 1px solid #007AFF;
	padding: 5rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	background-color: #fff;
}
.btn_item {
	font-size: 13px;
	background-color: #F228D1;
	color: #FFFFFF;
	margin: 5rpx;
	padding: 0 10rpx;
	height: 2em;
	line-height: 2em;
}
</style>
